<template>
  <div id="orderList">
    <div  class="statushead" >
        <div class="back" @click="onBack">
            <i class="icon-arrow_lift"></i>
        </div>
        <span  class="name">订单列表</span>
        <div  class="statustext"></div>
    </div>
    <div infinite-scroll-distance="20" class="orderbody">
      <a  @click="orderDetail(item)" class="ordercard" v-for="item in orderList" :key="item.openid">
          <div  class="ordercard-body">
              <div  class="ordercard-avatar">
                  <img  :src="headimgurl">
              </div>
              <div  class="ordercard-content">
                  <div class="ordercard-head">
                      <div  class="title">
                          <p  class="name">
                              <span  class="content">{{item.createTime | time }}</span>
                              <svg >
                                  <use  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                              </svg>
                          </p>
                          <!--这里使用订单状态和支付状态组合显示
                          订单: 新下单/已完成/已取消
                          支付: 未支付/已支付-->
                          <p  class="status">{{item.orderStatus | formatOrderStatus(item.payStatus) }}</p>
                      </div>
                      <div class="num-content"> 
                        <span>桌号：</span>{{item.numTable}}
                        <span>&nbsp;&nbsp;人数：</span>{{item.numPeople}}
                      </div>
                  </div>
                  <div  class="ordercard-detail">
                      <p  class="detail">
                          <!--<span  class="productname">豆乳盒子</span>-->
                          <!--<span ></span>-->
                      </p>
                      <p  class="price">¥{{item.orderAmount}}</p>
                  </div>
              </div>
          </div>
      </a>
    </div>
  </div>
  
</template>

<script type="text/ecmascript-6">
  import { getCookie } from 'common/js/util';
  const ERR_OK = 0;
  export default {
    data() {
      return {
        headimgurl: '',
        orderList: [],
        wechatUserList: [],
        orderStatusName: ''
      };
    },
    created() {
      this.getHeadimgurl();
      this.$axios.get('/buyer/order/list', {params: {'openid': getCookie('openid')}})
      .then((response) => {
          response = response.data;
          console.log(response);
          if (response.code === ERR_OK) {
              this.order = response.data;
              this.orderList = this.order.content;
              if (this.order.content[0]) {
                this.wechatUserList = this.order.content[0].wechatUserList;
              }
              console.log(this.wechatUserList);
          } else {
              alert(response.msg);
          }
      });
    },
    computed: {
      // getHeadimgurl(item) {
      //   console.log(item.openid);
      //   this.$axios.get('/buyer/wechatuser/headimgurl', {params: {'openid': item.openid}})
      //     .then((response) => {
      //       response = response.data;
      //       console.log(response);
      //       if (response.code === ERR_OK) {
      //           return response.data;
      //       } else {
      //           alert(response.msg);
      //       }
      //   });
      // }
    },
    methods: {
      onBack() {
        this.$router.back();
      },
      orderDetail(item) {
        location.href = '/#/order/' + item.orderId;
      },
      getHeadimgurl() {
        this.$axios.get('/buyer/wechatuser/headimgurl', {params: {'openid': getCookie('openid')}})
          .then((response) => {
            response = response.data;
            console.log(response);
            if (response.code === ERR_OK) {
                this.headimgurl = response.data;
            } else {
                alert(response.msg);
            }
        });
      }
    },
    filters: {
      time: function (value) {
        var date = new Date(value);
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();
      },
      formatOrderStatus: function (orderStatus, payStatus) {
        if (orderStatus === 8) {
            return '已完成';
        } else if (orderStatus === 9) {
            return '已取消';
        } else if (payStatus === 0) {
            return '未支付';
        } else {
            return '已支付';
        }
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  html, body {
    height: 100%;
  }
  #orderList
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    .statushead
      position: fixed;
      top: 0;
      width: 100%;
      height: 30px;
      z-index: 9;
      padding-top: 16px;
      text-align: center;
      background-color: #fff;
      margin-bottom: 5px;
      border-bottom: 1px solid rgba(7,17,27,0.1);
      .back
        position: absolute
        top: 6px
        left: 0
        .icon-arrow_lift
          display: block
          padding: 6px
          font-size: 20px
          color: #666
      .statustext
        position: absolute
        top: 12px
        right: 10px
        font-size: 14px
        color: red
    .orderbody
      position: relative;
      margin-top: 60px;
      background-color: #f5f5f5;
      margin-bottom: 10px;
      .ordercard
        display: block;
        padding-top: 10px;
        padding-left: 10px;
        margin-top: 10px;
        background-color: #fff;
      .ordercard-body
        display: flex;
      .ordercard-avatar
        flex: none;
        padding-right: 10px;
        img
          width: 32px;
          height: 32px;
      .ordercard-content
        flex: 1;
        svg 
          width: 4px;
          height: 4px;
        .ordercard-head
          padding-right: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
        .ordercard-detail
          display: flex;
          justify-content: space-between;
          padding-right: 10px;
          align-items: center;
          padding: 10px;
          .price
            color: #333;
            font-weight: 700;
        .title 
          display: flex;
          justify-content: space-between;
        .num-content
          padding-top: 2px;
          font-size: 12px;
          color: #00a0dc;
</style>